<template>
	<div class="diag">
		<el-dialog v-model="dialogFormVisible" width="65%" title="选择核验规则" @close="close">
			<div class="search_select">
				<div class="search_input">
					<span class="span-label">规则名称:</span>
					<el-input v-model="form.input" placeholder="输入规则名称" @change="init"> </el-input>
				</div>
				<!-- <span class="span-label">状态:</span>
                <el-select v-model="form.checkStatus" @change="init" placeholder="请选择">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select> -->
				<div class="search_input">
					<span class="span-label">是否有效:</span>
					<el-select v-model="form.vState" placeholder="请选择" @change="init">
						<el-option v-for="item in useState" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</div>
				<div class="search_input">
					<span class="span-label">所属规则分类:</span>
					<el-select v-model="form.vType" placeholder="请选择" @change="init">
						<el-option v-for="item in typeDatas" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</div>
			</div>
			<div class="table_container">
				<el-table
					ref="multipleTableRef"
					v-loading="loading"
					:data="tableData"
					border
					:row-key="row => row.id"
					style="width: 100%; margin-top: 8px"
					@selection-change="handleSelectionChange"
				>
					<el-table-column :reserve-selection="true" type="selection" width="55"> </el-table-column>
					<el-table-column label="序号" width="60" prop="id"> </el-table-column>
					<el-table-column label="规则名称" prop="ruleName"></el-table-column>
					<el-table-column label="规则描述" prop="ruleDescription"> </el-table-column>
					<el-table-column label="所属规则分类" prop="ruleTypeName"> </el-table-column>
					<el-table-column label="规则参数类型" prop="ruleParameterType">
						<template #default="scope">
							<span v-if="scope.row.ruleParameterType == 1">SQL</span>
							<span v-if="scope.row.ruleParameterType == 2">代码块</span>
						</template>
					</el-table-column>
					<el-table-column label="规则参数" prop="ruleParameter" show-overflow-tooltip width="120"> </el-table-column>
					<el-table-column label="规则优先级" prop="rulePriority"> </el-table-column>
					<el-table-column label="版本时间" prop="versionId"> </el-table-column>
					<el-table-column label="状态" prop="runStatus">
						<template #default="scope">
							<div v-if="scope.row.runStatus === 1" class="status-item">运行中<i class="success-icon"></i></div>
							<div v-else class="status-item">已停止<i class="error-icon"></i></div>
						</template>
					</el-table-column>
					<el-table-column label="是否有效" prop="invalidFlag"></el-table-column>
				</el-table>
				<div class="Pagination">
					<el-pagination
						:current-page="currentPage"
						:page-size="pageSize"
						layout="total, prev, pager, next"
						:total="count"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
					>
					</el-pagination>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" @click="confirm">确 定</el-button>
					<el-button @click="dialogFormVisible = false">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup name="RuleCheck">
import { get_verification_rules, get_used_rules_List, get_rule_type_dict, FiledRuleMapping } from '@/api/data-qa-fe/index'
import { ref, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus/es'

const emit = defineEmits(['close'])
const props = defineProps({
	diagShow: {
		type: Boolean,
		default: false
	},
	tableId: {
		type: Number,
		default: () => 1
	},
	fieldInfo: {
		type: Object,
		default: () => {}
	}
})
const multipleTableRef = ref()
const dialogFormVisible = ref(false)
const options = ref([
	{
		value: '',
		label: '全部'
	},
	{
		value: '0',
		label: '运行中'
	},
	{
		value: '1',
		label: '已停止'
	}
])
const useState = ref([
	{
		value: '',
		label: '全部'
	},
	{
		value: '0',
		label: '有效'
	},
	{
		value: '1',
		label: '无效'
	}
])
const typeDatas = ref([])
const form = ref({
	checkStatus: '',
	vState: '0',
	vType: '',
	input: ''
})
const loading = ref(true)
const value = ref('')
const count = ref(0)
const currentPage = ref(1)
const pageSize = ref(5)
const tableData = ref([])
const multipleSelection = ref([])
watch(
	() => props.diagShow,
	(newVal, oldVale) => {
		dialogFormVisible.value = newVal
		if (newVal) {
			init()
			getCheckList()
		}
	}
)
onMounted(() => {
	loading.value = false
	getRuleList()
})
const init = () => {
	let param = {
		limit: pageSize.value,
		page: currentPage.value,
		datasetTableId: props.tableId,
		ruleName: form.value.input,
		invalidFlag: form.value.vState,
		ruleTypeName: form.value.vType,
		ruleTypeId: form.value.vType,
		datasetFieldCode: props.fieldInfo.datasetFieldCode
	}
	get_verification_rules(param).then((res: any) => {
		if (res.code == 0) {
			tableData.value = res.data.list
			count.value = res.data.total
		}
	})
}
const getCheckList = () => {
	let param = {
		limit: 1000,
		page: 1,
		datasetTableId: props.tableId,
		ruleName: form.value.input,
		invalidFlag: form.value.vState,
		ruleTypeName: form.value.vType,
		datasetFieldCode: props.fieldInfo.datasetFieldCode
	}
	// 获取已选中规则
	get_used_rules_List(param).then((res: any) => {
		if (res.code == 0) {
			multipleSelection.value = res.data
			multipleSelection.value.forEach(item => {
				multipleTableRef.value.toggleRowSelection(item)
			})
		}
	})
}
const getRuleList = () => {
	typeDatas.value.push({
		label: '全部',
		value: ''
	})
	get_rule_type_dict().then(res => {
		typeDatas.value = typeDatas.value.concat(res.data)
	})
}
const handleSizeChange = () => {}
const handleCurrentChange = (val: any) => {
	console.log(`当前页: ${val}`)
	currentPage.value = val
	init()
}
const handleSelectionChange = (val: any) => {
	multipleSelection.value = val
}
const close = () => {
	form.value = {
		checkStatus: '',
		vState: '0',
		vType: '',
		input: ''
	}
	currentPage.value = 1
	multipleTableRef.value.clearSelection()
	dialogFormVisible.value = false
	emit('close', false)
}
const confirm = () => {
	let ruleList = multipleSelection.value.map((item: any) => {
		return {
			ruleId: item.id,
			checkSql: item.ruleName
		}
	})
	let nowDate = new Date()
	let param = {
		...props.fieldInfo,
		invalidFlag: '0',
		versionId: nowDate.getFullYear() + '' + (nowDate.getMonth() + 1) + '' + nowDate.getDate(),
		datasetFieldId: props.fieldInfo.id,
		datasetTableId: props.tableId,
		ruleList: ruleList
	}
	// if (ruleList.length == 0) {
	// 	ElMessage({
	// 		type: 'error',
	// 		message: '至少选择一条规则!'
	// 	})
	// } else {
	FiledRuleMapping(param).then((res: any) => {
		if (res.code == 0) {
			ElMessage({
				type: 'success',
				message: '核验成功!'
			})
		} else {
			ElMessage({
				type: 'error',
				message: res.message
			})
		}
		close()
	})
	// }
}
</script>
<style lang="scss" scoped>
.search_select {
	padding: 20px 20px 20px 0;
	display: flex;
	flex-wrap: wrap;
	.search_input {
		margin-bottom: 15px;
		margin-right: 15px;
	}
	.span-label {
		margin: 0 10px 0 20px;
	}
}
.el-input,
.el-input__inner {
	width: auto;
}
.status-item {
	display: flex;
	align-items: center;
}

.success-icon {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(81, 196, 27, 1);
	margin-left: 5px;
}
.error-icon {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: rgba(245, 35, 45, 1);
	margin-left: 5px;
}
</style>
